<template>
    <el-form ref="formRef" :model="form" :rules="rules">
        <el-form-item prop="username">
            <el-input v-model="form.username" placeholder="请输入用户名" prefix-icon="el-icon-user" />
        </el-form-item>
        <el-form-item prop="password">
            <el-input v-model="form.password" placeholder="请输入密码" prefix-icon="el-icon-lock" />
        </el-form-item>
        <el-row v-if="Boolean(props.getCaptcha)">
            <el-col :span="13">
                <el-form-item prop="captcha">
                    <el-input v-model="form.captcha" placeholder="请输入验证码" prefix-icon="el-icon-message" />
                </el-form-item>
            </el-col>
            <el-col :span="8" :offset="1">
                <el-form-item>
                    <img class="captcha" :src="state.src" alt="" />
                </el-form-item>
            </el-col>
            <el-col :span="2">
                <el-button
                    class="btn-refresh"
                    icon="el-icon-refresh"
                    :disabled="state.disabled"
                    @click="handleRefreshCaptcha"
                />
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item>
                    <el-checkbox-group v-model="form.remember">
                        <el-checkbox label="记住我" name="type" />
                    </el-checkbox-group>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item v-if="props.forget" class="forget-password">
                    <a @click="handleForgetPassword">找回密码</a>
                </el-form-item>
            </el-col>
        </el-row>
        <el-button class="btn-login" type="primary" @click="handleLogin">登录</el-button>
    </el-form>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";

const DefaultCaptcha =
    'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><rect x="0" y="0" width="10" height="10" fill="none"/></svg>';

const rules = {
    username: { required: true, message: "请输入用户名" },
    password: { required: true, message: "请输入密码" },
    captcha: { required: true, message: "请输入验证码" },
};

const props = defineProps({
    forget: { type: [String, Function], default: "" },
    getCaptcha: { type: [String, Function], default: "" },
});
const emits = defineEmits(["login"]);
const router = useRouter();
const formRef = ref(null);
const form = reactive({ username: "", password: "", captcha: "", remember: [] });
const state = reactive({
    disabled: false,
    src: DefaultCaptcha,
});

const refreshCaptchaCallback = (src) => {
    state.src = src || DefaultCaptcha;
    state.disabled = false;
};

const handleRefreshCaptcha = async () => {
    if (typeof props.getCaptcha === "string") {
        state.src = `${props.getCaptcha}?v=${Date.now()}`;
    } else if (typeof props.getCaptcha === "function") {
        state.disabled = true;
        const fn = props.getCaptcha(refreshCaptchaCallback);

        if (fn instanceof Promise) {
            const src = await fn;
            refreshCaptchaCallback(src);
        }
    }
};

const handleForgetPassword = () => {
    if (typeof props.forget === "string") {
        router.push(props.forget);
    } else if (typeof props.forget === "function") {
        props.forget();
    }
};

const handleLogin = async () => {
    const status = await formRef.value.validate().catch(() => {});
    if (!status) return;
    const params = { ...form, remember: Boolean(form.remember.length) };

    if (!props.getCaptcha) {
        delete params.captcha;
    }

    emits("login", { type: "account", params });
};

defineExpose({ refreshCaptcha: handleRefreshCaptcha });

onMounted(() => {
    if (props.getCaptcha) {
        handleRefreshCaptcha();
    }
});
</script>

<style lang="scss" scoped>
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.btn-login {
    width: 100%;
}
.captcha {
    display: block;
    width: 100%;
    height: 32px;
}
.btn-refresh {
    justify-content: flex-end;
    width: 100%;
    border: none;
    background: none;
    padding: 0;
    &:hover {
        background: none;
    }
    &.is-disabled {
        :deep(.el-icon) {
            animation: rotate 1s infinite;
        }
    }
}
.forget-password {
    :deep(.el-form-item__content) {
        justify-content: flex-end;
        a {
            text-decoration: none;
            color: var(--el-color-info-light-3);
        }
    }
}
</style>
